<script setup>
import  { tool }  from "../../tool/index"
import { ref,inject,computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useStore } from "vuex"

const commit = useStore()
const store = inject('store')
const user = computed(() => {
    return store.state.user
})
const nickName = ref(user.value.nickname)
const getImgPath = tool.serverPath + "api/app_api/image/download?fileName=" + user.value.avatar
const avatar = ref(getImgPath)
const selectedImage = ref()
const gender = ref()
const genderOptions = [{
  label:"男",
  value:"male"
},{
  label:"女",
  value:"female"
},{
  label:"未设置",
  value:"other"
},]
const bio = ref(user.value.bio)
const fileInputRef = ref()

function clickFile(){
  fileInputRef.value.click()
}
function handleFileChange(event) {
  const file = event.target.files[0]
  const type = tool.fileApi.imageType(file)
  if(type.type == "err"){
    ElMessage({
      type:"warning",
      message:"文件格式有误，请检查大小:(< 5 MB) 及文件类型:(图片)"
    })
    file = undefined
  }
  selectedImage.value = file
  avatar.value = URL.createObjectURL(file)
}
async function changeData(){
  var date = {
    nickname:nickName.value,
    gender:gender.value,
    bio:bio.value,
    avatar:user.value.avatar
  }
  try {
    if(avatar.value!=getImgPath){
      const response = await tool.fileApi.update(selectedImage.value,user.value.avatar)
      console.log("旧:"+user.value.avatar)
      date.avatar = response.fileName
      console.log("新:"+date.avatar)
    }
  if( nickName.value != null){
    const data = {
      key:"update",
      data:{
        key:Object.keys(date),
        value:Object.values(date)
      },
      where:{
        key:["id"],
        value:[`${user.value.id}`]
      }
    }
    const ChangeData = await tool.axiosApi("user", data, "post")
    if(ChangeData.message == true){
      ElMessage({
        type:"success",
        message:"资料更改成功"
      })
      commit.commit("changeUser",{
        nickname:date.nickname,
        gender:date.gender == "male" ? "男":( gender.value == "female" ? "女":"未设置" ),
        bio:date.bio,
        avatar:date.avatar
      })
      // commit.commit("upDate")
    }else{
      ElMessage({
        type:"error",
        message:"资料更改失败"
      })
    }
  }else{
    ElMessage("昵称不得为空")
  }
} catch (error) {
    
  }
}
</script>

<template>
<div class="from" >
    <el-form>
      <el-form-item label="头像:">
        <div @click="clickFile()" > 
        <input @change="handleFileChange($event)" v-show="false" ref="fileInputRef" type="file" >
        <el-tooltip
        class="box-item"
        effect="dark"
        content="点击修改头像"
        placement="top"
      >
      <el-image class="avatar" :src="avatar" />
      </el-tooltip>
    </div>
    </el-form-item>
    <el-form-item label="昵称:">
      <el-input type="text" v-model="nickName" />
    </el-form-item>
    <el-form-item label="性别:">
      <el-select v-model="gender">
    <el-option
      v-for="item in genderOptions"
      :key="item.value"
      :label="item.label"
      :value="user.gender == item.label ? gender = item.value:item.value " 
    />
  </el-select>
    </el-form-item>
    <el-form-item label="简介:">
      <el-input
    v-model="bio"
    :rows="2"
    type="textarea"
    placeholder="请你介绍一下自己吧"
  />
    </el-form-item>
  </el-form>
  <div class="sub" >
    <el-button  @click="changeData()" type="primary">确认修改</el-button>
  </div>
</div>

</template>
<style scoped>
.from{
    margin: auto;
    width: 500px;
}
.avatar{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.sub{
    text-align: right;
}
</style>